<template>
  <a-card>
    <div :class="advanced ? 'search' : null">
      <a-form layout="horizontal" :form="pageParams">
        <div :class="advanced ? null : 'fold'">
          <a-row>
            <a-col :md="8" :sm="24">
              <a-form-item
                label="用户名称："
                :labelCol="{ span: 5 }"
                :wrapperCol="{ span: 18, offset: 1 }"
              >
                <a-input v-model="pageParams.userName" placeholder="请输入" />
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item
                label="手机号："
                :labelCol="{ span: 5 }"
                :wrapperCol="{ span: 18, offset: 1 }"
              >
                <a-input v-model="pageParams.userPhone" placeholder="请输入" />
              </a-form-item>
            </a-col>
            <a-button style="margin-left: 8px" type="primary" @click="search"
              >查询</a-button
            >
          </a-row>
        </div>
        <span style="float: right; margin-top: 3px; margin-right: 70px">
          <a-button type="primary" @click="add">新增</a-button>
        </span>
      </a-form>
    </div>
    <div>
      <a-table
        :columns="columnsList.columns"
        :data-source="columnsList.datatable"
        :pagination="false"
        :loading="loading"
      >
        <span slot="operation" slot-scope="text, record">
          <a-button
            style="margin-right: 8px"
            type="primary"
            @click="detail(record.userId)"
            >详情</a-button
          >
          <a-button
            style="margin-right: 8px"
            type="primary"
            @click="enableDisable(record, text)"
            >启用/禁用</a-button
          >
          <a-button
            style="margin-right: 8px"
            type="danger"
            @click="del(record.userId)"
            >删除</a-button
          >
        </span>
      </a-table>
      <div class="pagination">
        <a-pagination
          v-model="pageParams.pageNum"
          :total="total"
          show-less-items
          @change="PageNumChange"
        />
      </div>
    </div>
    <editModalVue
      :addModel="addModel"
      @close="close"
      v-if="addModel.open"
      @refresh="refresh"
    />
  </a-card>
</template>

  <script>
import editModalVue from "./editModal.vue";
import {
  getSystemUserList,
  deleteSystemUser,
  enableDisable,
} from "@/services/user";
import { mapState } from "vuex";

export default {
  name: "QueryList",
  components: { editModalVue },
  data() {
    return {
      advanced: false,
      selectedRows: [],
      searchform: {
        userName: "",
        userPhone: "",
      },
      addModel: {
        open: false,
        title: "新增用户",
        userId: null,
        disabled:false
      },
      pageParams: {
        userName: "",
        userPhone: "",
        pageNum: 1,
        pageSize: 10,
      },
      total: 0,
      modalType: "add",
      visible: false,
      resetVisible: false,
      record: {
        userId: "",
      },
      loading: false,
      columnsList: {
        columns: [
          {
            title: "序号",
            dataIndex: "name",
            customRender: function (text, record, index) {
              return parseInt(index) + 1;
            },
            align: "center",
          },
          {
            title: "用户名称",
            dataIndex: "userName",
            align: "center",
          },
          {
            title: "手机号码",
            dataIndex: "userPhone",
            align: "center",
          },
          {
            title: "性别",
            dataIndex: "sex",
            customRender: (_) => ["男", "女"][_ - 1],
            align: "center",
          },
          {
            title: "邮箱",
            dataIndex: "email",
            align: "center",
          },
          {
            title: "状态",
            dataIndex: "userStatus",
            customRender: (_) => ["启用", "禁用"][_ - 1],
            align: "center",
          },
          {
            title: "操作",
            dataIndex: "operation",
            scopedSlots: { customRender: "operation" },
            align: "center",
               fixed: "right",
            width: 200,
          },
        ],
        datatable: [],
      },
    };
  },
  authorize: {
    deleteRecord: "delete",
  },
  computed: {
    ...mapState("account", ["user"]),
  },
  mounted() {
    this.getData();
  },
  methods: {
    // 关闭弹框
    close() {
      this.addModel.open = false;
      this.addModel.userId = null;
    },
    // 新增
    add() {
      this.addModel.open = true;
      this.addModel.title = "新增用户";
      this.$emit("refrehList");
      this.addModel.disabled = false;
    },
    //启用/禁用
    enableDisable(record) {
      let userStatus = record.userStatus === 1 ? 2 : 1;
      enableDisable(record.userId, userStatus).then((res) => {
        console.log("enableDisable-res", res);
        if (!res) return;
        this.getData();
      });
    },
    //搜索
    search() {
      this.getData();
    },

    //查看详情
    detail(userId) {
      console.log(userId, "userId");
      this.addModel.title = "查看详情";
      this.addModel.open = true;
      this.addModel.disabled = true;
      this.addModel.userId = userId;
    },
    getData() {
      this.loading = true;
      getSystemUserList(this.pageParams).then((res) => {
        if (!res) return;
        this.loading = false;
        this.columnsList.datatable = res?.data.list;
        this.total = res?.data?.total;
      });
    },
    refresh() {
      this.getData();
    },
    // 改变页码
    PageNumChange(page, pageSize) {
      this.pageParams.pageNum = page;
      this.pageParams.pageSize = pageSize;
      this.getData();
    },
    del(userId) {
      deleteSystemUser(userId).then((res) => {
        console.log("delres: ", res);
        if (!res) return;
        this.$message.success(res?.data);
        this.getData();
      });
    },
  },
};
</script>

  <style lang="less" scoped>
.search {
  margin-bottom: 54px;
}
.fold {
  width: calc(100% - 216px);
  display: inline-block;
}
.operator {
  margin-bottom: 18px;
}
.pagination {
  height: 60px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
@media screen and (max-width: 900px) {
  .fold {
    width: 100%;
  }
}
</style>
